<template>
    <div>
        <div>
            <!--下拉-->
            <van-dropdown-menu>
                <van-dropdown-item v-model="value1" :options="option1" @change="onchange" />
                <van-dropdown-item v-model="value2" :options="option2" @change="onchange"  />
            </van-dropdown-menu>
        </div>
        <div>
            <van-search v-model="FindKeyValue" @search="onSearch" placeholder="请输入搜索关键词"/>
        </div>
        <div>
            <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
                <van-list
                        v-model="loading"
                        :finished="finished"
                        finished-text="没有更多了"
                        @load="onLoad"
                >
                    <template>
                        <div class="goods-item" v-for="good in goodslist" :key="good" v-on:click="toGoodsDetail(good.id)">
                            <div class="goods-item-picture">
                                <!--商品图片-->
                                <van-image
                                        :src="good.pictureUrl"
                                />
                            </div>
                            <div style="width: 70%">
                                <div class="goods-item-description">
                                    <div class="van-multi-ellipsis--l2">{{good.description}}</div>
                                </div>
                                <div class="goods-item-classification">
                                    <div>{{good.classification}}</div>
                                </div>

                                <div class="goods-item-price">
                                    <div>￥{{good.price}}</div>
                                </div>
                                <div class="goods-item-soldNum">
                                    已售：{{good.soldNum}}
                                </div>
                                <div class="goods-item-stockNum">
                                    库存：{{good.stockNum}}
                                </div>

                                <div class="goods-item-seller">
                                    卖家：{{good.sellerName}}

                                </div>
                            </div>


                        </div>
                    </template>
                </van-list>
            </van-pull-refresh>
        </div>

    </div>

</template>

<script>
    import {Search} from 'vant';

    const goodsMessage1 =new ApiService("/pethome/goods");/*这个要和后端一样*/
    Vue.use(Search);

    import Vue from 'vue';
    import {DropdownMenu, DropdownItem} from 'vant';
    import {ApiService} from "../../axios/apiService";
    import { Toast } from 'vant';

    Vue.use(Toast);
    Vue.use(DropdownMenu);
    Vue.use(DropdownItem);
    export default {
        components: {
        },
        data() {
            return {
                goodslist: [ ],
                FindKeyValue: '',
                value1: 0,
                value2: 'a',
                option1: [
                    {text: '全部商品', value: 0},
                    {text: '商城自营', value: 1},
                    {text: '二手商品', value: 2},
                ],
                option2: [
                    {text: '默认排序', value: 'a'},
                    {text: '价格升序', value: 'b'},
                    {text: '销量排序', value: 'c'},
                ],
                loading: false,
                finished: false,
                refreshing: false,
            };
        },
        methods: {
            getKeyValueFromHome(){
                //获取从主页过来的所搜值
                console.log("getKeyValueFromHome:从主页过来的搜索值："+keyValue)
                var keyValue = this.$route.params.keyValue;
                console.log("keyValue getKeyValueFromHome :"+keyValue)
                if(undefined===keyValue){
                    //console.log("从主页过来的所搜值为空")
                    //this.onSearch()
                    this.getgoodsMessage1()
                }else{
                    this.FindKeyValue = keyValue
                    this.onSearch()
                }
            },
            onSearch(){
                //商品搜索
                console.log("onSearch:商品搜索"+this.FindKeyValue)
                const searchKeyValue = new ApiService("/shop/searchKeyValue")
                searchKeyValue.getParams({
                    keyValue :this.FindKeyValue
                }).then(res=>{
                    console.log(res.data)
                    if(res.data.length == 0){
                        Toast("没有您想要的搜索结果哦")
                    }else{
                        this.goodslist = res.data;
                    }
                })
            },
            onchange(){
              console.log("我是onchange");
              this.getgoodsMessage1();
            },
            onOption1(){
                this.onRefresh();
            },
            getgoodsMessage1(){
                //根据下拉选择框获取商品列表
                console.log("getgoodsMessage1:根据下拉选择框获取商品列表")
                    console.log("我是getgoodsMessage1，没有值从home传过来")
                    // console.log("this.value1:"+this.value1);//this.value1有值，前端数据没问题
                    goodsMessage1.getParams(
                        {
                            value1: this.value1,
                            value2: this.value2
                        }
                    ).then(res => {
                        console.log("获取全部商品列表 getgoodsMessage1：" + res.data)
                        this.goodslist = res.data;
                    })

            },
            toGoodsDetail(goodsId) {
               console.log("goodsId"+goodsId)
               this.$router.push({name: "goodsDetail",params:{goodsId}})
            },
            onLoad() {
                setTimeout(() => {
                    if (this.refreshing) {
                        this.list = [];
                        this.refreshing = false;
                    }

                    for (let i = 0; i < 10; i++) {
                        this.list.push(this.list.length + 1);
                    }
                    this.loading = false;

                    if (this.list.length >= 40) {
                        this.finished = true;
                    }
                }, 1000);
            },
            onRefresh() {
                // 清空列表数据
                this.finished = false;
                // 重新加载数据
                // 将 loading 设置为 true，表示处于加载状态
                this.loading = true;
                this.onLoad();
            },

        },
        mounted() {
            this.getKeyValueFromHome()


        }
    };
</script>

<style scoped>
    .goods-item-stockNum{

    }
    .goods-item-soldNum{

    }
    .goods-item-price {
        color: #b22222;
        font-size: 20px;
        margin-top: 5px
    }

    .goods-item-classification {

        color: gray;
        font-weight: 800;

    }

    .goods-item-description {
        color: gray;
        font-weight: 800;
    }

    .goods-item {
        display: flex;
        margin-bottom: 10px;
        background: white;
    }

    .goods-item-picture {
        width: 30%;
    }
</style>